<template>
  <div>
    <!--1视图-->
    抽烟：<input type="checkbox" v-model="hobby"  value="抽烟"><br>
    喝酒：<input type="checkbox" v-model="hobby" value="喝酒"><br>
    烫头：<input type="checkbox" v-model="hobby" value="烫头"><br>
    你选择的是：{{hobby}}<br>
    <button @click="change">点击切换</button><br>
    <span v-if="flag">
       你好，vue
    </span>
    <span v-if="!flag">
       你好，张三
    </span>
  </div>
</template>

<script>
export default {
  name: "userView",
  data() {
    return {
      //2属性定义
      hobby:[],
      flag:true
    }
  }, methods: {
    //3自定义方法
    change(){
        this.flag=!this.flag;
    }
  }, created() {
    console.log("2created1")
    //4钩子函数
  },beforeCreate() {
    console.log("1beforeCreate")
  },beforeMount() {
    console.log("3beforeMount")
  },mounted() {
    console.log("4mounted")
  }
}
</script>

<style scoped>

</style>